<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-back-button [text]="'core.back' | translate" />
        </ion-buttons>
        <ion-title>
            <h1>
                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="moduleId" [courseId]="courseId" />
            </h1>
        </ion-title>

        <ion-buttons slot="end" />
    </ion-toolbar>
</ion-header>

<ion-content>
    <core-split-view>
        <ion-refresher slot="fixed" [disabled]="!submissions.loaded" (ionRefresh)="refreshList($event.target)">
            <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
        </ion-refresher>
        <core-loading [hideUntil]="submissions.loaded">
            <ion-list>
                <core-group-selector [groupInfo]="groupInfo" [(selected)]="groupId" (selectedChange)="reloadSubmissions()"
                    [courseId]="courseId" />

                <!-- List of submissions. -->
                <ng-container *ngFor="let submission of submissions.items">
                    <ion-item class="ion-text-wrap" (click)="submissions.select(submission)" button
                        [attr.aria-current]="submissions.getItemAriaCurrent(submission)" [detail]="true">
                        <core-user-avatar [user]="submission" [linkProfile]="false" slot="start" />
                        <ion-label>
                            <p class="item-heading" *ngIf="submission.userfullname">{{submission.userfullname}}</p>
                            <p class="item-heading" *ngIf="!submission.userfullname">
                                {{ 'addon.mod_assign.hiddenuser' | translate }}{{submission.blindid}}
                            </p>
                            <p *ngIf="assign && assign!.teamsubmission">
                                <span *ngIf="submission.groupname" class="core-groupname">
                                    <core-format-text [text]="submission.groupname" contextLevel="course" [contextInstanceId]="courseId" />
                                </span>
                                <span *ngIf="assign!.preventsubmissionnotingroup && !submission.groupname && submission.noGroups
                                    && !submission.blindid" class="text-danger">
                                    {{ 'addon.mod_assign.noteam' | translate }}
                                </span>
                                <span *ngIf="assign!.preventsubmissionnotingroup && !submission.groupname && submission.manyGroups
                                    && !submission.blindid" class="text-danger">
                                    {{ 'addon.mod_assign.multipleteams' | translate }}
                                </span>
                                <span *ngIf="!assign!.preventsubmissionnotingroup && !submission.groupname">
                                    {{ 'addon.mod_assign.defaultteam' | translate }}
                                </span>
                            </p>
                            <p *ngIf="submission.statusTranslated">
                                <ion-badge class="ion-text-start ion-text-wrap" [color]="submission.statusColor">
                                    {{ submission.statusTranslated }}
                                </ion-badge>
                            </p>
                            <p *ngIf="submission.gradingStatusTranslationId">
                                <ion-badge class="ion-text-start ion-text-wrap" [color]="submission.gradingColor">
                                    {{ submission.gradingStatusTranslationId | translate }}
                                </ion-badge>
                            </p>
                        </ion-label>
                    </ion-item>
                </ng-container>
            </ion-list>

            <core-empty-box *ngIf="!submissions || submissions.empty" icon="fas-file-signature"
                [message]="'addon.mod_assign.submissionstatus_' | translate" />
        </core-loading>
    </core-split-view>
</ion-content>
